import React, { useState } from "react";
import { Column, Bar, Line} from '@ant-design/charts';
import {Button, PageHeader, Space} from "antd";
import cityThroughModel from "../models/cityThroughModel";
import '../App.css';


function Firstb(props) {
    const [data, setData] = useState([]);
    React.useEffect(async () => {
        //分页查询时间段内各城市航班吞吐量
        let getCThroughputList = async () => {

            var arrayModels = [];
            const response = await fetch(
                'http://flightapi.xiexianbo.xin/airPort/getCThroughputList?pageSize=1000',
                {
                    method:'GET'
                }
            )
            const data  = await response.json();
            const data1 = await data.data.data;
            data1.forEach((value)=>{
                let model = new cityThroughModel(value.aptCcity,value.aptName,value.enterNum,value.exitNum,value.total);
                arrayModels.push(model);
            });
            arrayModels.forEach((value)=>{
                console.log(value);
            });
            setData(arrayModels);
            // console.log(arrayModels);
        }
        getCThroughputList();
    }, []);
    const config = {
        data: data,
        xField: 'aptName',
        yField: ['exitNum'],
        meta: {
            aptName: {alias: '机场'},
            exitNum: {alias: '出人流量'},
        },
        // legend: { position: 'top' },
        smooth: true,
        animation: {
            appear: {
                animation: 'path-in',
                duration: 1000,
            },
        },
        scrollbar: {type: 'vertical'},
    };

    return (
        <>
            <PageHeader
                className="site-page-header"
                onBack={() => {props.history.goBack()}}
                title="出人流量"
            />,
            <Column {...config} ></Column>
            <div className="div2"></div>

        </>
    );
}
export default Firstb;
